<template>
    <div class="home-container">
         <!-- 分类 + 轮播图区域开始 -->
        <div class="banner-wrap">
            <div class="wrapper">

                <!-- 轮播图区域 -->
                <el-carousel :interval="5000" arrow="always" height="540px" :autoplay="false">
                    <el-carousel-item v-for="(item, index) in bannerList" :key="index">
                        <a href="" class="banner-img-wrap">
                            <img :src="global.FILE_DOMAIN + item.image_url" alt="">
                        </a>
                    </el-carousel-item>
                </el-carousel>

                <!-- 分类区域 -->
                <div class="category-wrap">
                    <ul>
                        <template v-for="(topCategory, index) in categoryStore.categoryList" :key="index">
                            <li>
                                <!-- 顶级分类区域开始 -->
                                <div class="top-category-wrap">
                                    <a href="javascript:void(0)">
                                        {{topCategory.name}}
                                    </a>
                                    <span class="iconfont icon-xiangyoujiantou"></span>
                                </div>
                                <!-- 顶级分类区域结束 -->

                                <!-- 子分类区域开始 -->
                                <div class="sub-category-wrap">
                                    <div class="sub-category">
                                        <div class="sub-category-item" v-for="(secondCategory, index) in topCategory.children" :key="index">
                                            <span class="name">{{ secondCategory.name }}</span>
                                            <div class="cate-wrap">
                                                <span class="cate-name" v-for="(item, index) in secondCategory.children" :key="index" @click="$router.push({path: '/goods-list', query:{cid: item.cid}})">{{ item.name }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 子分类区域结束 -->
                            </li>
                        </template>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 分类 + 轮播图区域结束 -->

        <!-- 新品好物区域开始 -->
        <div class="fresh-wrap wrapper">
            <!-- 标题 -->
            <div class="title">
                <div class="left">新品好物<span>新品出炉 品质靠谱</span></div>
                <a href="/goods-list" class="right">查看全部<i class="iconfont icon-xiangyoujiantou"></i></a>
            </div>

            <!-- 内容 -->
            <div class="content">
                <ul>
                    <li v-for="(item, index) in productList" :key="index">
                        <a :href="'/goods-detail?id='+item.goods_id">
                            <div class="image-wrap">
                                <img :src="global.FILE_DOMAIN + item.image_url" alt="">
                            </div>
                            <p class="name ellipsis-1">{{ item.name }}</p>
                            <div class="price-wrap">
                                <div class="price">
                                    <i class="symbol">￥</i>
                                    <span>{{(item.price/100).toFixed(2)}}</span>
                                </div>

                                <div class="market-price">
                                    <i>￥</i>
                                    <span>{{(item.market_price/100).toFixed(2)}}</span>
                                </div>
                            </div>
                            <b>新品</b>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 新品好物区域结束 -->


        <!-- 人气推荐区域开始 -->
        <div class="popular-wrap wrapper" ref="recommendRef">
            <!-- 标题 -->
            <div class="title">
                <div class="left">人气推荐<span>人气爆款 不容错过</span></div>
            </div>

            <!-- 内容 -->
            <div class="content">
                <!-- <ul> -->
                    <TridentGoodsItem v-for="(item, index) in recommendList" :goods="item" :key="index"/>
                <!-- </ul> -->
            </div>
        </div>
        <!-- 人气推荐区域结束 -->


        <!-- 玫瑰区域开始 -->
        <div class="panel-wrap wrapper" ref="roseRef">
            <!-- 标题区域 -->
            <div class="title">
                <!-- 左边区域 -->
                <div class="left">鲜花玫瑰</div>

                <!-- 右边区域 -->
                <div class="right">
                    <ul>
                        <li><a href="/goods-list?keyword=红玫瑰">红玫瑰</a></li>
                        <li><a href="/goods-list?keyword=白玫瑰">白玫瑰</a></li>
                        <li><a href="/goods-list?keyword=粉玫瑰">粉玫瑰</a></li>
                        <li><a href="/goods-list?keyword=紫玫瑰">紫玫瑰</a></li>
                    </ul>

                    <a href="/goods-list?keyword=生鲜" class="more">查看全部 <i class="iconfont icon-xiangyoujiantou"></i></a>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="content">
                <!-- 内容左区域 -->
                <div class="left">
                    <img class="cover" src="@/assets/uploads/rose_goods_cover.png" alt="">
                </div>

                <!-- 内容右区域 -->
                <div class="right">
                    <ul>
                        <li v-for="(item, index) in roseList" :key="index">
                            <a :href="`/goods-detail?id=${item.goods_id}`">
                                <!-- 商品图片 -->
                                <img v-img-lazy="global.FILE_DOMAIN + item.cover_url" alt="">
                                <!-- 商品名称 -->
                                <p class="name ellipsis-2">{{item.goods_name}}</p>

                                <!-- 价格区域 -->
                                <b class="price">
                                    <i>￥</i>
                                    <span>{{(item.price/100).toFixed(2)}}</span>
                                </b>
                            </a>

                            <!-- 蒙版 -->
                            <div class="mask">
                                <div>
                                    <p>
                                        <a :href="`/goods-list?keyword=${item.category_name}`">找相似</a>
                                    </p>
                                    <p>
                                        <a href="">
                                            发现更多宝贝
                                            <i class="iconfont icon-xiangyoujiantou"></i>
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 玫瑰区域结束 -->


        <!-- 最新专题区域开始 -->
        <div class="special-wrap wrapper" ref="newSpecialRef">
            <!-- 最新专题标题 -->
            <div class="title">
                <!-- 最新专题标题左边 -->
                <div class="left">最新专题</div>
                <!-- 最新专题标题右边 -->
                <div class="right">
                    <a href="/goods-list" class="more">查看全部 <i class="iconfont icon-xiangyoujiantou"></i></a>
                </div>
            </div>

            <!-- 最新专题内容 -->
            <div class="content">
                <ul>
                    <li v-for="(item, index) in newSpecialList" :key="index">
                        <!-- 图片 -->
                        <a :href="`/goods-detail?id=${item.goods_id}`" class="cover-wrap">
                            <img v-img-lazy="global.FILE_DOMAIN + item.cover_url" alt="">
                        </a>

                        <!-- 名称 -->
                        <div class="mask">
                            <div class="left">
                                <p class="ellipsis-1">{{item.goods_name}}</p>
                                <p>{{ item.descibe.replace(/<.*?>/ig, "") }}</p>
                            </div>
                            <div class="right">
                                <i>￥</i>
                                <span>{{ (item.price/100).toFixed(2) }}起</span>
                            </div>
                        </div>

                        <div class="bottom">
                            <div>
                                <!-- 收藏数量 -->
                                <p>
                                    <i class="iconfont icon-shoucang1"></i>
                                    <span>{{item.collect_num}}</span>
                                </p>

                                <!-- 浏览 -->
                                <p>
                                    <i class="iconfont icon-yanjing"></i>
                                    <span>1999</span>
                                </p>
                            </div>

                            <!-- 评论 -->
                            <div>
                                <i class="iconfont icon-pinglun"></i>
                                <span>{{item.comment_num}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 最新专题区域开始 -->

        <!-- 返回顶部组件 -->
        <TridentBackTop @backTop="backTop" :isShowBackTop="isShowBackTop"></TridentBackTop>
    </div>
</template>


<script setup>
import { ref, inject, onMounted, watch } from 'vue'

import { useCategoryStore } from '@/stores/modules/category'
import { reqGetGoodsListAPI } from "@/apis/goods"
import { reqGetBannerAPI } from "@/apis/home"

import useScroll from '@/utils/useScroll'

import { useLazyData } from '@/hooks'


// ---------------- 返回顶部功能开始 ----------------
const isShowBackTop = ref(false)
const {scrollTop, scrollToTop} = useScroll()
watch(scrollTop, (oldValue, newValue) => {
    isShowBackTop.value = oldValue > 800 ? true : false
})

// 返回顶部
const backTop = () => {
    scrollToTop()
}
// ---------------- 返回顶部功能结束 ----------------



// ---------------- 定义全局变量开始 ----------------
const global = inject('global')

const categoryStore = useCategoryStore()
// ---------------- 定义全局变量结束 ----------------



// ------------------ 加载页面开始 ------------------
onMounted( async () => {
    // 获取分类数据
    categoryStore.getCategoryTrees({
        status: '1'
    })

    await Promise.all([
        getBannerList(),
        getProductGoods(),
        // getRoseGoods(),
        // getSpecialGoods()
    ])
})
// ------------------ 加载页面结束 ------------------



// ---------------- 获取轮播开始 ----------------
const bannerList = ref([])
const getBannerList = async () => {
    // 请求数据
    const result = await reqGetBannerAPI({type: 2, status: 1, sort_field: 'sort'})
	bannerList.value = result.data.banners != null ? result.data.banners : []
}
// ---------------- 获取轮播结束 ----------------



// ---------------- 新品好物开始 ----------------
const productList = ref([])
const getProductGoods = async () => {
    // 请求数据
    const result = await reqGetGoodsListAPI({page_size: 4, top_cid: global.CID})
	let goodsItems = result.data.goods != null ? result.data.goods : []
    goodsItems.forEach(item => {
        item.name = item.goods_name
        item.original_price = item.market_price
        item.image_url = item.cover_url
    })
    productList.value = goodsItems
}
// ---------------- 新品好物结束 ----------------



// ---------------- 人气推荐开始 ----------------
// 定义推荐变量
const recommendList = ref([])

// 推荐ref
const recommendRef = ref(null)

// 请求推荐数据懒加载方式
const {result} = useLazyData(reqGetGoodsListAPI, {page_size: 5, goods_label_id: 3, top_cid: global.CID}, recommendRef)
watch(() => result.value.goods, (oldValue, newValue) => {
    oldValue.forEach(item => {
        item.sales_num = item.sales_num > 0 ? item.sales_num : 10000
    })

    recommendList.value = oldValue
})

// 请求推荐数据
const getRecommendGoods = async () => {
    // 请求数据
    const result = await reqGetGoodsListAPI({page_size: 5, goods_label_id: 3, top_cid: global.CID})
	let goodsItems = result.data.goods != null ? result.data.goods : []
    goodsItems.forEach(item => {
        item.name = item.goods_name
        item.original_price = item.market_price
        item.image_url = item.cover_url
        item.sales_num = 10000
    })
    recommendList.value = goodsItems
}
// ---------------- 人气推荐结束 ----------------



// ---------------- 玫瑰数据开始 ----------------
// 定义玫瑰变量
const roseList = ref([])

// 玫瑰ref
const roseRef = ref(null)

// 请求推荐数据懒加载方式
const roseResult = useLazyData(reqGetGoodsListAPI, {page_size: 8, second_cid: 2357}, roseRef)
watch(() => roseResult.result.value.goods, (oldValue, newValue) => {
    oldValue.forEach(item => {
        item.sales_num = item.sales_num > 0 ? item.sales_num : 10000
    })

    roseList.value = oldValue
})



const getRoseGoods = async () => {
    // 请求数据
    const result = await reqGetGoodsListAPI({page_size: 8, second_cid: 2357})
	let goodsItems = result.data.goods != null ? result.data.goods : []
    goodsItems.forEach(item => {
        item.name = item.goods_name
        item.original_price = item.market_price
        item.image_url = item.cover_url
    })
    roseList.value = goodsItems
}
// ---------------- 玫瑰数据结束 ----------------



// ---------------- 最新专题开始 ----------------
// 定义最新专题变量
const newSpecialList = ref([])

// 最新专题ref
const newSpecialRef = ref(null)

// 请求推荐数据懒加载方式
const newSpecialResult = useLazyData(reqGetGoodsListAPI, {page_size: 4, top_cid: global.CID}, newSpecialRef)
watch(() => newSpecialResult.result.value.goods, (oldValue, newValue) => {
    oldValue.forEach(item => {
        item.sales_num = item.sales_num > 0 ? item.sales_num : 10000
    })

    newSpecialList.value = oldValue
})

const getSpecialGoods = async () => {
    // 请求数据
    const result = await reqGetGoodsListAPI({page_size: 3, top_cid: global.CID})
	let goodsItems = result.data.goods != null ? result.data.goods : []
    goodsItems.forEach(item => {
        item.name = item.goods_name
        item.original_price = item.market_price
        item.image_url = item.cover_url
    })
    newSpecialList.value = goodsItems
}
// ---------------- 最新专题结束 ----------------
</script>
<style scoped lang="scss">
.home-container {
    padding-top: 183px;
    // 分类 + 轮播图区域
    .banner-wrap {
        height: 540px;
        background-color: #f5f5f5;
        /* 版心区域 */
        .wrapper {
            position: relative;
            overflow: hidden;

            ::v-deep(.el-carousel .el-carousel__arrow--left) {
                left: 300px;
            }
            ::v-deep(.el-carousel .el-carousel__indicators .is-active .el-carousel__button) {
                background-color: $main-color;
            }
            .banner-img-wrap {
                display: flex;
                height: 540px;
                margin-left: 250px;
                width: 1000px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }

            /* 分类区域 */
            .category-wrap {
                position: absolute;
                top: 0;
                left: 0;
                width: 250px;
                height: 540px;
                background-color: rgba(0, 0, 0, 1);
                ul {
                    position: relative;
                    li {
                        height: 41.6px;
                        line-height: 41.6px;

                        display: flex;

                        &:hover {
                            .top-category-wrap {
                                background-color: $main-color;
                            }
                            .sub-category-wrap {
                                transform: none;
                            }
                        }

                        // 顶级分类
                        .top-category-wrap {
                            display: flex;
                            justify-content: space-between;
                            z-index: 100;
                            width: 250px;
                            padding: 0 15px 0 30px;
                            background-color: rgba(0, 0, 0, 1);
                            
                            a {
                                font-size: 16px;
                                color: white;
                                .icon {
                                    font-size: 24px;
                                    padding-right: 5px;
                                }
                                >span {
                                    font-size: 14px;
                                    &:first-child {
                                        margin-right: 5px;
                                    }
                                }
                            }
                            .iconfont {
                                color: white;
                            }
                        }
                        
                        // 子分类
                        .sub-category-wrap {
                            position: absolute;
                            left: 250px;
                            top: 0;
                            z-index: 99;
                            width: 1000px;
                            opacity: 1;
                            height: 540px;
                            transition: all 0.6s linear;
                            transform: translateX(-100%);
                            background-color: rgba(39,186,155, 0.95);
                            .sub-category {
                                display: flex;
                                flex-wrap: wrap;
                                padding: 0 20px;

                                .sub-category-item {
                                    display: flex;
                                    border-bottom: 1px solid gainsboro;
                                    width: 1000px;
                                    line-height: 37px;

                                    &:last-child {
                                        border-bottom: none;
                                    }
                                    .name {
                                        font-size: 16px;
                                        width: 80px;
                                        margin-right: 10px;
                                    }
                                    .cate-wrap {
                                        flex: 1;
                                        .cate-name {
                                            padding: 0 4px;
                                            font-size: 14px;
                                            cursor: pointer;
                                            &:hover {
                                                color: #fff;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    // 新鲜好物区域
    .fresh-wrap {
        padding: 0 6px;
        background-color: white;
        margin-top: 10px;
        // 标题区域
        .title {
            height: 80px;
            line-height: 80px;
            
            border-bottom: 2px solid $main-color;
            display: flex;
            justify-content: space-between;
            align-items: end;
            color: #999;
            .left {
                font-size: 29px;
                color: #333;
                span {
                    font-size: 16px;
                    color: #999;
                    margin-left: 34px;
                }
            }
            .right {
                display: flex;
                justify-content: space-between;
                color: #999;
                .iconfont {
                    margin-left: 5px;
                }
            }
        }

        // 内容区域
        .content {
            padding-top: 20px;
            ul {
                display: flex;
                flex-wrap: wrap;

                li {
                    position: relative;
                    width: 302px;
                    height: 405px;
                    background-color: #BCF7EA;
                    margin-right: 6px;
                    margin-bottom: 8px;
                    text-align: center;
                    border: 1px solid gainsboro;

                    &:hover {
                        border: 1px solid $main-color;
                    }

                    &:nth-child(4n) {
                        margin-right: 0;
                    }

                    .image-wrap {
                        height: 320px;
                        background-color: #fff;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .name {
                        font-size: 20px;
                        color: #333;
                        margin-top: 20px;
                        margin-bottom: 10px;
                        padding: 0 10px;
                    }

                    .price-wrap {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 5px 10px;
                        .price {
                            color: $price-color;
                            font-size: 18px;
                            .symbol {
                                font-size: 14px;
                            }
                        }
                        .market-price {
                            color: #999;
                            text-decoration: line-through;
                        }
                    }

                    b {
                        position: absolute;
                        top: 18px;
                        left: 13px;
                        width: 30px;
                        height: 50px;
                        font-size: 18px;
                        color: $main-color;
                        border: 1px solid $main-color;
                        border-radius: 3px;
                        font-weight: 400;
                        line-height: 24px;
                    }
                }
            }
        }
    }

    // 人气推荐区域
    .popular-wrap {
        margin-top: 10px;
        padding: 0 6px 10px 6px;
        background-color: white;
        .title {
            height: 100px;
            line-height: 100px;

            display: flex;
            justify-content: space-between;
            align-items: end;
            color: #999;
            border-bottom: 1px solid #ccc;
            .left {
                font-size: 29px;
                color: #333;
                span {
                    font-size: 16px;
                    color: #999;
                    margin-left: 34px;
                }
            }
            a {
                color: #999;
                .iconfont {
                    margin-left: 5px;
                }
            }
            .right {
                display: flex;
                justify-content: space-between;
            }
        }
        .content {
            display: flex;
            flex-wrap: wrap;
            ::v-deep(.goods-item-wrap) {
                margin-right: 32px;
                &:nth-child(5n) {
                    margin-right: 0;
                }
            }
        }
    }

    // 热门品牌区域
    .brand-wrap {
        height: 466px;
        background-color: white;
        padding: 0 6px;
        margin-top: 10px;
        // 标题区域
        .title {
            height: 112px;

            display: flex;
            justify-content: space-between;
            color: #999;

            // 左边区域
            .left {
                line-height: 112px;
                font-size: 29px;
                color: #333;
                span {
                    font-size: 16px;
                    color: #999;
                    margin-left: 34px;
                }
            }

            a {
                color: #999;
                .iconfont {
                    margin-left: 5px;
                }
            }
            .right {
                div {
                    margin-top: 80px;
                    display: flex;
                    justify-content: space-between;
                    a {
                        color: white;
                        background-color: #e2e2e2;
                        padding: 2px 0;
                        &:first-child {
                            margin-right: 5px;
                        }
                    }
                    .active {
                        background-color: $main-color;
                    }
                }
            }
        }

        // 内容区域
        .content {
            ul {
                display: flex;
                flex-wrap: wrap;

                li {
                    position: relative;
                    width: 241px;
                    height: 306px;
                    background-color: #F0F9F4;
                    margin-right: 5px;
                    text-align: center;
                    &:nth-child(5n) {
                        margin-right: 0;
                    }
                    img {
                        width: 100%;
                    }
                }
            }
        }
    }

    // 仪表区域
    .panel-wrap {
        background-color: #fff;
        margin-top: 10px;
        // 标题区域
        .title {
            height: 96px;
            line-height: 96px;
            padding: 0 10px;

            display: flex;
            justify-content: space-between;
            // 左边区域
            .left {
                font-size: 29px;
                color: #333;
            }
            // 右边区域
            .right {
                display: flex;
                ul {
                    display: flex;
                    margin-right: 65px;
                    li {
                        a {
                            font-size: 16px;
                            margin: 0 10px;
                            &:hover {
                                color: $main-color;
                            }
                        }

                        &:first-child a {
                            margin-left: 0;
                        }
                        &:last-child a {
                            margin-right: 0;
                        }
                    }
                }

                .active {
                    background-color: #27BA9B;
                    padding: 2px 7px;
                    color: white;
                }
                // 查看全部
                .more {
                    font-size: 16px;
                    color: #999;
                }
            }
        }

        // 内容区域
        .content {
            height: 610px;
            display: flex;
            // 内容左区域
            .left {
                width: 240px;
                margin-right: 8px;
                .cover {
                    width: 100%;
                    height: 100%;
                }
            }

            // 内容右区域
            .right {
                flex: 1;
                ul {
                    display: flex;
                    flex-wrap: wrap;
                    li {
                        position: relative;
                        width: 242px;
                        height: 304px;

                        margin-right: 8px;
                        margin-bottom: 2px;
                        padding: 8px 29px 11px 29px;

                        border: 1px solid transparent;
                        &:hover {
                            border: 1px solid $main-color;
                        }
                        &:hover .mask {
                            height: 84px;
                            opacity: 1;
                        }

                        &:nth-child(4n) {
                            margin-right: 0;
                        }
                        &:nth-child(n+5) {
                            margin-bottom: 0;
                        }

                        // 商品图片
                        img {
                            width: 184px;
                            height: 184px;
                        }

                        // 商品名称
                        .name {
                            font-size: 16px;
                            margin: 12px 0 15px 0;
                        }

                        // 价格区域
                        .price {
                            font-size: 16px;
                            color: #9a2e1f;
                            span {
                                font-size: 22px;
                            }
                        }

                        // 蒙版
                        .mask {
                            position: absolute;
                            bottom: 0;
                            left: 0;

                            width: 241px;
                            height: 0;
                            background-color: $main-color;
                            z-index: 100;

                            display: flex;
                            justify-content: center;
                            align-items: center;
                            opacity: 0;

                            transition: all 0.2s linear;
                            div {
                                width: 125px;
                                text-align: center;
                            }
                            p:first-child {
                                padding-bottom: 5px;
                                border-bottom: 1px solid #a9dbcc;
                                a {
                                    font-size: 18px;
                                    color: #fff;
                                }
                            }
                            p:last-child {
                                a {
                                    font-size: 13px;
                                    color: #fff;
                                    .iconfont {
                                        font-size: 13px;
                                        color: #fff;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    // 最新专题区域
    .special-wrap {
        height: 490px;
        background-color: #fff;
        margin: 10px auto;
        // 最新专题标题
        .title {
            height: 115px;
            padding: 0 10px;

            display: flex;
            justify-content: space-between;
            // 最新专题标题左边
            .left {
                line-height: 115px;
                font-size: 29px;
                color: #333;
            }

            // 最新专题标题右边
            .right {
                margin-top: 72px;
                .more {
                    color: #999;
                }
            }
        }

        // 最新专题内容
        .content {
            ul {
                display: flex;
                justify-content: space-between;
                li {
                    border: 1px solid #ccc;
                    position: relative;
                    width: 300px;

                    transition: all 0.2s;

                    &:hover {
                        border: 1px solid $main-color;
                        transform: translateY(-2px);
                    }

                    .cover-wrap {
                        margin: 0 auto;
                        margin-top: 10px;
                        display: block;
                        height: 284px;
                        width: 260px;
                        // 图片
                        img {
                            width: 100%;
                            height: 90%;
                        }
                    }


                    .mask {
                        position: absolute;
                        left: 0;
                        bottom: 70px;

                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        width: 100%;
                        height: 80px;
                        padding: 15px;
                        background-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
                        .left {
                            flex: 1;
                            p:first-child {
                                font-size: 14px;
                                color: white;
                                margin-bottom: 4px;
                                line-height: 24px;
                            }

                            p:last-child {
                                font-size: 12px;
                                color: #999;
                            }
                        }

                        .right {
                            padding: 5px 8px;
                            color: #9a2e1f;
                            font-size: 10px;
                            background-color: white;
                            span {
                                font-size: 14px;
                            }
                        }
                    }

                    .bottom {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        background-color: $main-color;
                        height: 71px;
                        padding: 0 15px;
                        font-size: 14px;
                        color: #fff;
                        div:first-child {
                            display: flex;
                            p:first-child {
                                margin-right: 24px;
                            }
                        }
                        .iconfont {
                            font-size: 14px;
                            color: #fff;
                            margin-right: 4px;
                        }
                    }
                }
            }
        }
    }
}
</style>